<template>
    <!-- 具名插槽 -->
  <div class="article-container">
    <h3 v-color="'red'">article</h3>
    <p >qq</p>
    <!-- title -->
    <div class="header-box">
        <slot name="title"></slot>
    </div>
    <!-- content  -->
    <div class="content-box">
        <!-- 在封装组件是，为插槽提供属性对应的值，这种方法叫做作用域插槽  -->
        <slot name="content" msg="hello vue.js" :user="userinfo"></slot>
    </div>
    <!-- author -->
    <div class="author-box">
        <slot name="author"></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "Article",
  data() {
    return {
        userinfo: {
            name: 'sjd',
            age: 21
        }
    }
  },
};
</script>

<style lang="less" scoped>
.article-container {
    
    > div{
        min-height: 150px;
        margin: 20px;
    }
  .header-box {
    background-color: pink;
  }
  .content-box {
    background-color: lightblue;
  }
  .author-box {
    background-color: lightcoral
  }
}
</style>